<template>
  <div class="dashboard-container">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
      <el-divider content-position="center"><span style="font-size: 16px;font-weight: bold;">登录信息</span></el-divider>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="账号：" prop="school_userid">
              <el-input v-model="ruleForm.school_userid" placeholder="请输入账号"  :disabled="true"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="网盘链接：" prop="school_workLink">
              <el-input v-model="ruleForm.school_workLink" placeholder="请输入网盘链接"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="密码：" prop="school_pass">
              <el-input v-model="ruleForm.school_pass" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="提取码：" prop="school_workCode">
              <el-input v-model="ruleForm.school_workCode" placeholder="请输入提取码"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>


      <el-divider content-position="center"><span style="font-size: 16px;font-weight: bold;">基本信息</span></el-divider>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="机构名称：" prop="school_name">
              <el-input v-model="ruleForm.school_name" placeholder="请输入机构名称"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="机构logo：">
              <el-upload ref="upload" action="#"
                         :limit="1"
                         :http-request="submitUpload"
                         :file-list="dataForm.imgFileList"
                         list-type="picture-card"
                         :before-upload="beforeAvatarUpload"
                         :on-preview="handlePictureCardPreview"
                         :on-change="OnChange"
                         :on-remove="handleRemove"
                         :on-exceed="handleExceed"
                         accept="image/jpeg,image/png">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">图片不允许超过500kb</div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" append-to-body>
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-form-item  label="机构简介：" prop="content_introduction" style="margin-bottom: 120px">
        <quill-editor v-model="ruleForm.content_introduction" ref="myQuillEditor" :options="editorOption">
        </quill-editor>
        <!--el-input type="textarea" v-model="ruleForm.content_introduction" placeholder="请输入机构简介"></el-input>-->
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系方式：" prop="school_mobile">
              <el-input v-model="ruleForm.school_mobile" placeholder="请输入联系方式"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="品牌名称：" prop="school_brandName">
              <el-input v-model="ruleForm.school_brandName" placeholder="请输入品牌名称"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="机构签约合同起始时间：" prop="school_beginTime">
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.school_beginTime"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="机构签约合同到期时间：" prop="school_endTime">
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.school_endTime"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-form-item label="机构是否开启：" prop="school_status">
        <el-radio-group v-model="ruleForm.school_status">
          <el-radio :label="0">不开启</el-radio>
          <el-radio :label="1">开启</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="机构是否完成：" prop="school_shown">
        <el-radio-group v-model="ruleForm.school_shown">
          <el-radio :label="0">未完成</el-radio>
          <el-radio :label="1">完成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-divider content-position="center"><span style="font-size: 16px;font-weight: bold;">SEO信息</span></el-divider>
      <el-form-item label="TITLE：" prop="school_seoTitle">
        <el-input v-model="ruleForm.school_seoTitle" placeholder="请输入TITLE"></el-input>
      </el-form-item>
      <el-form-item label="Keywords：" prop="school_seoKeyword">
        <el-input v-model="ruleForm.school_seoKeyword" placeholder="请输入Keywords"></el-input>
      </el-form-item>
      <el-form-item label="Description：" prop="content_seo_description">
        <el-input v-model="ruleForm.content_seo_description" placeholder="请输入Description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {uploadImg, schoolAdd, schoolInfo, schoolLog,schoolEdit} from "@/api/menu";
import {mapGetters} from 'vuex'
import {getInfo} from "@/api/user";
import {
  quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {isvalidPhone} from "@/utils/validate";

export default {
  data() {
    let validPhone = (rule, value, callback) => {
      if ( !value ) {
        callback(new Error('请输入电话号码'))
      } else if ( !isvalidPhone(value) ) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
      editorOption:{},
      fileList: [{
        name: '',
        url: ''
      }],
      ruleForm: {
        school_userid: '',
        school_workLink: '',
        school_pass: '',
        school_workCode: '',
        school_name: '',
        school_logo: '',
        content_introduction: '',
        school_mobile: '',
        school_brandName: '',
        school_seoTitle: '',
        school_seoKeyword: '',
        content_seo_description: '',
        school_beginTime: '',
        school_endTime: '',
        school_status: '',
        school_shown: '',
        school_bussinessId: ''
      },
      rules: {
        school_userid: [
          {required: true, message: '请输入账号', trigger: 'blur'}
        ],
        school_workLink: [
          {required: true, message: '请输入网盘链接', trigger: 'blur'}
        ],
        school_pass: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        extractCode: [
          {required: true, message: '请输入提取码', trigger: 'blur'}
        ],
        school_name: [
          {required: true, message: '请输入机构名称', trigger: 'blur'}
        ],
        content_introduction: [
          {required: true, message: '请输入机构简介', trigger: 'blur'}
        ],
        school_mobile: [
          {required: true, trigger: 'blur', validator: validPhone}
        ],
        school_brandName: [
          {required: true, message: '请输入品牌名称', trigger: 'blur'}
        ],
        school_seoTitle: [
          {required: true, message: '请输入TITLE', trigger: 'blur'}
        ],
        school_seoKeyword: [
          {required: true, message: '请输入Keywords', trigger: 'blur'}
        ],
        content_seo_description: [
          {required: true, message: '请输入Description', trigger: 'blur'}
        ],
        school_beginTime: [
          {type: 'string', required: true, message: '机构签约合同起始时间', trigger: 'change'}
        ],
        school_endTime: [
          {type: 'string', required: true, message: '机构签约合同到期时间', trigger: 'change'}
        ],
        school_status: [
          {required: true, message: '请选择是否开启机构', trigger: 'change'}
        ],
        school_shown: [
          {required: true, message: '请选择机构是否完成', trigger: 'change'}
        ]
      },
      dataForm: {
        imgFileList: []//绑定用户上传的图片List
      },
      dialogVisible: false,
      dialogImageUrl: '',
      imgUrl: [],
    };
  },
  components: {
    quillEditor
  },
  computed: {
    ...mapGetters([
      'schoolId'
    ]),
  },
  mounted() {
    this.getInformation()
    this.getInfo()
  },
  methods: {
    /**
     * 获取详情
     */
    getInfo(){
      schoolInfo(this.$route.query.rowId).then(response => {
        console.log(response);
        this.ruleForm = response.data;
        this.imgUrl.push( response.data.school_logo);
        console.log(response.data.school_logo);
        this.imgUrl.forEach(item => {
          let obj = new Object();
          obj.url = item;
          this.dataForm.imgFileList.push(obj);
        });
      }).catch((e) => {});;
    },
    /**
     * 获取用户信息
     */
    getInformation() {
      getInfo().then(response => {
        console.log(response);
        this.id=response.data.id
      })
    },
    /**
     * 提交
     * @param formName
     */
    submitForm(formName) {
      this.$refs[ formName ].validate((valid) => {
        if ( valid ) {
          this.listLoading = true;
          schoolEdit(Object.assign(this.ruleForm,{id: this.$route.query.rowId})).then(response => {
            this.listLoading = false;
            console.log(response);
            this.$message({message: '修改成功', type: 'success', duration: 1000});
            this.$router.push({path: '/dashboard'})
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[ formName ].resetFields();
    },
    /**
     * 图片上传前校验
     * @param file
     */
    beforeAvatarUpload(file) {
      var testmsg = /^image\/(jpeg|png|jpg)$/.test(file.type)
      const isLt1M = file.size / 1024 / 1024 / 0.5 < 1
      if ( !testmsg ) {
        this.$message.error('上传图片格式不对!');
        return
      }
      if ( !isLt1M ) {
        this.$message.error('上传图片大小不能超过 500kb!');
        return
      }
      return testmsg && isLt1M
    },
    /**
     * 文件超出个数限制时
     * @param files
     * @param fileList
     */
    handleExceed(files, fileList) {
      this.$message.warning(`只允许上传一张图片`);
    },
    /**
     * 点击上传图片
     */
    submitUpload() {
      let formData = new FormData(); //  用FormData存放上传文件
      this.dataForm.imgFileList.forEach(file => {
        console.log(file);
        formData.append('file', file.raw)
      })
      uploadImg(formData).then(response => {
        console.log(response);
        this.ruleForm.school_logo = response.data
      })
    },
    /**
     * 预览图片时
     * @param file
     */
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    /**
     * 文件上传状态改变
     * @param file
     * @param fileList
     * @constructor
     */
    OnChange(file, fileList) {
      const isType = file.type === 'image/jpeg' || 'image/png'
      const isLt5M = file.size / 1024 / 1024 < 1

      if ( !isType ) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
        fileList.pop()
      }
      if ( !isLt5M ) {
        this.$message.error('上传头像图片大小不能超过 1MB!');
        fileList.pop()
      }
      this.dataForm.imgFileList.push(file)
      this.hideUpload = fileList.length >= this.limit

    },
    /**
     * 删除图片时
     * @param file
     * @param fileList
     */
    handleRemove(file, fileList) {
      if ( file.id ) {
        console.log('删除了已被上传过的图片')
        console.log(file.id)
        this.deleteImgFileList.push(file.id)
      }
      this.dataForm.imgFileList = fileList
      this.hideUpload = fileList.length >= this.limit
    },
  }
}
</script>

<style lang="scss" scoped>
.el-upload__tip {
  margin: 0 20px;
  height: 46px;
  overflow: hidden;
  display: inline-block;
}

.dashboard {
  &-container {
    margin: 0 15px;
    padding: 30px;
    background-color: #fff;
  }

  &-text {
    font-size: 16px;
  }
}
</style >
<style scoped>
/deep/.ql-editor{
  height: 400px!important;
}
</style>
